/*
  学习目标：使用useState改造计数器功能
  步骤：
     1. 改造类组件为函数式组件

    学习目标：使用useState的三个注意事项
     */
//  2. 导入useState
import React, { useState } from 'react';

export default function App() {
    // 3. 调用useState函数，创建状态count和更新count的函数
  // 语法：const [状态变量，更新状态的函数] = useState(初始值)

    const [count,setCount]=useState(1000)
    const [msg,setMsg]=useState('')

    // 1. 声明多个状态：调用useState多次，得到多个状态
    // 2. useState可以创建任意类型的状态
  // 2.1 声明数组
  const [list, setList] = useState([1,2,3])
//   2.2 声明对象
const [obj, setObj] = useState({name:'zs',age:18})
 // 2.3 👎声明JSX，一般不会这么写
 const [jsx, setJsx] = useState(<h1>我是JSX</h1>);

 // 3. 👍规范问题
 // const [声明的状态， set大写驼峰式命名] = useState(初始值)
 // 使用快捷键useState去声明状态
 const [arr, setArr] = useState();
  return (
    <div>
        {list.map((item)=>{
            return <h1>{item}</h1>
        })}
        count---{count}
        msg---{msg}
        <h2>
            {obj.name}=={obj.age}
        </h2>
        <h3>{jsx}</h3>
        {/* 4. 使用state 和setState */}
       <button onClick={()=>setCount(count+1)}>点击改变count</button>
       <button onClick={()=>setMsg(msg+'~')}>点击改变msg</button>
    </div>
  )
}

